<template>
  <div id="app">
    <router-view v-if="!$route.meta.slideIn"></router-view>
    <transition :name="direction === 'forward' ? 'in' : 'out'">
      <router-view v-if="$route.meta.slideIn" class="router-view"></router-view>
    </transition>
    <modal></modal>
    <msg></msg>
    <loading></loading>
  </div>
</template>

<script>
import Modal from './components/modal.vue'
import Msg from './components/msg.vue'
import loading from './components/loading.vue'
import { mapState } from 'vuex'
export default {
  name: 'App',
  components: {
     Modal,
     Msg,
     loading,
  },
  computed:{
    ...mapState({
      direction: state => state.direction
    })
  },
  watch:{
    $route(to,from){
      if(this.$route.query.unslideIn || !from.name){
        this.$route.meta.slideIn = false;
      };
    }
  }
}
</script>
<style lang="less" scoped>
.router-view{
  width: 100%;
  height:100%;
}
.out-enter-active,
.out-leave-active,
.in-enter-active,
.in-leave-active {
  will-change: transform;
  transition: transform 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
  height: 100%;
  top: 0;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.out-enter {
  opacity: 0;
  transform: translate(-70%, 0);
}
.out-leave-active {
  opacity: 0;
  transform: translate(70%, 0);
}
.in-enter {
  opacity: 0;
  transform: translate(70%, 0);
}
.in-leave-active {
  opacity: 0;
  transform: translate(-70%, 0);
}

</style>
